<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>书籍详情</title>
		<link rel="stylesheet" href="/mobile/layui/css/layui.css" />
		<link rel="stylesheet" href="/mobile/css/mobile.css" />
		<script src="/mobile/js/jquery.min.js"></script>
		<script src="/mobile/js/jquery.easing.min.js"></script>
		<script src="/mobile/layui/layui.js"></script>
		<style>
			.article img {
				width: 100%;!important;
				height: auto;
			}
		</style>
	</head>
	<body>

		<div class="qiye_xiangqing">
			<div class="order_hd" style="padding-top: 15px; padding-left:15px;padding-right:15px;">
				<img src="{$rs.image}" />
				<div class="content">
					<div class="title">{$rs.name}</div>
					<div style="display:flex; justify-content: space-between;">
						<span style="color:red">￥<span id="danjia">{$rs.price}</span></span>

					</div>

				</div>

			</div>

			<div class="article">
				<div class="detail">
					<div class="hd" style="align-items: center; padding: 0; border-bottom: none; justify-content: center;">
						<div class="huabian">书籍介绍</div>
					</div>
					<div class="content">
						{$rs.content}
					</div>

				</div>
			</div>
			<div class="article">
				<div class="detail">
					<div class="hd" style="align-items: center; padding: 0; border-bottom: none; justify-content: center;">
						<div class="huabian">订购方式</div>
					</div>
					<dl class="shuji_detail_dl">
					    <dt>银行卡信息</dt>
				    	<dd><span class="label">收款单位：</span>{$site.bank_danwei}</dd>
						<dd><span class="label">开户银行：</span>{$site.bank_bankname}</dd>
						<dd><span class="label">开户支行：</span>{$site.bank_zhihang}</dd>
						<dd><span class="label">银行卡号：</span>{$site.bank_bankcard}</dd>
						<dt>支付宝信息</dt>
				    	<dd><span class="label">收款单位：</span>{$site.alipay_danwei}</dd>
						<dd><span class="label">支付宝账号：</span>{$site.alipay_account}</dd>
						<dd><span class="label">支付宝二维码：</span><img src="{$site.alipay_qrcode}" style="width:50%;height:auto;" /></dd>
					</dl>

				</div>
			</div>

		</div>

	</body>
	<script>
		$('#year_select').on('change', function() {

		        console.log($(this).val());
				window.location.href="{:url('shukan/qikan_detail')}?id={$rs.id}&year="+$(this).val();
		    });
		var layer = layui.layer;
		layui.use(function(){
		  layer = layui.layer;
		  var util = layui.util;
		  var $ = layui.$;
		  // 事件
		  util.on('lay-on', {
		    'test-offset-b': function(){
		      layer.open({
		        type: 1,
				title: '联系客服',
		        offset: 'b',
		        anim: 'slideUp', // 从下往上
		        area: ['100%', '320px'],
		        shade: 0.1,
		        shadeClose: true,
		        id: 'ID-demo-layer-direction-b',
		        content: '<div style="padding: 16px;">'+
					'<div style="display:flex;justify-content:space-between; margin-bottom:15px;">'+
						'<img src="{$site.dingyuekefu1}" style="width:150px;height:150px;">'+
						'<img src="{$site.dingyuekefu2}" style="width:150px;height:150px;">'+
					'</div>'+
					'<a href="tel:{$site.kefutel}"><div style="text-align:center">联系电话:{$site.kefutel}</div></a>'+
					'<div style="display:flex;justify-content:space-between; margin-top:15px;">'+
						'<button class="layui-btn layui-btn-normal layui-border-normal layui-btn-radius" onclick="save_pic()">保存图片到相册</button>'+
						'<button class="layui-btn layui-btn-normal layui-border-normal layui-btn-radius" onclick="copy({$site.kefutel})">一键复制联系电话</button>'+
					'</div>'+
				'</div>'
		      });
		    },

		  });
		});
		function copy(text) {

		  const input = document.createElement('textarea');
		  input.value = text;
		  document.body.appendChild(input);
		  input.select();
		  document.execCommand('copy');
		  document.body.removeChild(input);
		  layer.msg('复制成功');
		}
		function save_pic(){
			// 获取图片URL
			var imgUrl = '{$site.dingyuekefu1}';

			// 创建一个临时的链接元素
			var link = document.createElement('a');
			link.href = imgUrl;

			// 设置链接元素的下载属性为图片的名称
			link.download = get_file_name('{$site.dingyuekefu1}');

			// 将链接元素点击事件派发到文档
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);

			// 获取图片URL
			var imgUrl = '{$site.dingyuekefu2}';

			// 创建一个临时的链接元素
			var link = document.createElement('a');
			link.href = imgUrl;

			// 设置链接元素的下载属性为图片的名称
			link.download = get_file_name('{$site.dingyuekefu2}');

			// 将链接元素点击事件派发到文档
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		}
		function get_file_name(url){


			// 创建 URLSearchParams 对象并传入 URL
			fileName=url.split('/');
			return fileName[fileName.length-1];
		}
		console.log(get_file_name('{$site.dingyuekefu1}'));


	</script>
</html>
